<template>
	<view>
		<view class="navigation_bg">
			<view class="navigation">
				<view class="navigation_back" @tap="backref()">
					<uni-icons type="back" size="24" color="#fff"></uni-icons>
				</view>
				<view class="navigation_title">
					店铺详情
				</view>
			</view>
		</view>
		<view class="good_con">
			<view class="good_info">
				<view class="good_info_hd">
					<view class="good_info_msg">
						<view class="good_info_title">
							麻辣酸菜鱼店
						</view>
						<view class="good_info_brief">
							生活总是有很多的失败，但是这条路却更有...
						</view>
					</view>
					<view class="good_info_img">
						<image src="../../static/image/shop/shop_01.jpg" mode="aspectFill"></image>
					</view>
				</view>
				<view class="good_info_notice">
					<image src="../../static/image/shop/notice.svg" mode=""></image>
					<text>鱼，生活中的知己，想要了解它，就请吃掉它</text>
				</view>
			</view>

			<view class="good_tabs">
				<view class="good_tab" v-for="(item,index) in goodTab" :key="index"
					:class="goodType == item.type?'active':''" @tap="changeTab(item)">
					{{item.name}}
					<view class="good_tab_line">

					</view>
				</view>
			</view>

			<view class="good_con_detail" v-if="goodType == 1">
				<view class="good_con_aside">
					<view class="good_aside_tab" v-for="(item,index) in typeList" :key="index"
						:class="item.id == typeId?'active':''">
						{{item.name}}
						<view class="good_aside_tab_num" v-if="item.num != 0">
							{{item.num}}
						</view>
					</view>
				</view>
				<view class="good_con_list">
					<view class="good_con_list_title">
						{{typeName}}
					</view>
					<view class="good_con_item" v-for="(item,index) in goodsList" :key="index">
						<view class="good_con_item_img">
							<image :src="item.picUrl" mode=""></image>
						</view>
						<view class="good_con_item_info">
							<view class="good_con_item_title">
								{{item.name}}
							</view>
							<view class="good_con_item_price">
								¥{{item.price}}
							</view>
							<view class="good_con_item_type" v-if="item.type != null" @tap="selectType(item)">
								规格
								<view class="good_con_item_type_num" v-if="item.num > 0">
									{{item.num}}
								</view>
							</view>
							<view class="good_con_item_nums" v-if="item.type == null">
								<view class="good_con_item_dec" @tap="decGood(item)">
									<image src="../../static/image/shop/dec.svg" mode=""></image>
								</view>
								<view class="good_con_item_num">
									{{item.num}}
								</view>
								<view class="good_con_item_add" @tap="addGood(item)">
									<image src="../../static/image/shop/add.svg" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="good_con_merchant">
					<view class="good_con_mer_checkout">
						<view class="good_con_shop_car" v-if="carList.total == 0">
							<image src="../../static/image/shop/shopCar.svg" mode=""></image>
						</view>
						<view class="good_con_shop_car" v-if="carList.total > 0" @tap="openShopCar()">
							<image src="../../static/image/shop/shopCarActive.svg" mode=""></image>
							<view class="good_con_shopcar_num">
								{{carList.total}}
							</view>
						</view>
						<view class="good_merchant_distribute">
							<view class="merchant_price" v-if="carList.price >= 12">
								共¥{{carList.price}}元
							</view>
							<text>配送费2元</text>
						</view>
						<view class="good_merchant_min" v-if="carList.price < 12">
							12元起送
						</view>
						<view class="good_merchant_checkout" v-if="carList.price >= 12" @tap="tocheckout()">
							结算
						</view>
					</view>
				</view>
			</view>

			<view class="good_con_evaluate" v-if="goodType == 2">
				<view class="good_con_score">
					<view class="score_num">
						4.8
					</view>
					<view class="score_right">
						<view class="score_stars">
							<view class="score_star" v-for="(item,index) in star" :key="index">
								<image src="../../static/image/shop/star.svg" mode=""></image>
							</view>
						</view>
						<view class="score_type_num">
							极好 共100人点评
						</view>
					</view>
				</view>
				<view class="evaluate_types">
					<view class="evaluate_type" v-for="(item,index) in evaluateTypes"
						:class="item.type === evaluateType?'active':''">
						{{item.name}}<text v-if="item.number != null">({{item.number}})</text>
					</view>
				</view>
				<view class="evaluate_comments">
					<view class="evaluate_comment" v-for="(item,index) in commentList" :key="index">
						<view class="comment_hd">
							<view class="comment_attr">
								<image :src="item.attr" mode=""></image>
							</view>
							<view class="comment_info">
								<view class="comment_name">
									{{item.name}}
								</view>
								<view class="comment_stars">
									<image src="../../static/image/shop/star.svg" mode=""
										v-for="(item2,index2) in item.star" :key="index2 + 10"></image>
								</view>
							</view>
							<view class="comment_time">
								{{item.time}}
							</view>
						</view>
						<view class="comment_bd">
							<view class="comment_content">
								{{item.content}}
							</view>
							<view class="comment_imgs">
								<image :src="item2" mode="" v-for="(item2,index2) in item.imgList" :key="index2 + 20">
								</image>
							</view>
						</view>
						<view class="comment_bt">
							商家回复:{{item.replay}}
						</view>
					</view>
				</view>
			</view>

			<view class="good_shop_info" v-if="goodType == 3">
				<view class="good_shop_info_title">
					商家信息
				</view>
				<view class="good_shop_swiper">
					<swiper class="swiper" :indicator-dots="indicatorDots" autoplay=true interval=5000>
						<swiper-item>
							<image src="../../static/image/shop/banner.jpg" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/image/shop/banner.jpg" mode="aspectFill"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/image/shop/banner.jpg" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="good_shop_info_list">
					<view class="good_shop_info_item">
						<view class="good_shop_info_icon">
							<image src="../../static/image/shop/detail_icon_01.svg" mode=""></image>
						</view>
						<text>
							月销401份
						</text>
					</view>
					<view class="good_shop_info_item">
						<view class="good_shop_info_icon">
							<image src="../../static/image/shop/detail_icon_02.svg" mode=""></image>
						</view>
						<text>
							学校名称+校区+大概/精准位置
						</text>
					</view>
					<view class="good_shop_info_item">
						<view class="good_shop_info_icon">
							<image src="../../static/image/shop/detail_icon_03.svg" mode=""></image>
						</view>
						<text>
							130 **** 7854
						</text>
						<view class="call_phone">
							呼叫
						</view>
					</view>
					<view class="good_shop_info_item">
						<view class="good_shop_info_icon">
							<image src="../../static/image/shop/detail_icon_04.svg" mode=""></image>
						</view>
						<text>
							全天24小时营业
						</text>
					</view>
					<view class="good_shop_info_item">
						<view class="good_shop_info_icon">
							<image src="../../static/image/shop/detail_icon_05.svg" mode=""></image>
						</view>
						<text>
							提供配送服务
						</text>
					</view>
				</view>
			</view>
		</view>


		<transition appear name="type">
			<view class="good_type" v-show="typeFlag == true">
				<view class="good_type_select">
					已选：大份+微辣+小份+微辣...
				</view>
				<view class="good_type_info">
					<view class="good_type_info_img">
						<image src="../../static/image/shop/good_04.jpg" mode="aspectFill"></image>
					</view>
					<view class="good_type_info_msg">
						<view class="good_type_info_name">
							酸菜鱼烤鱼麻辣鱼200g下单啦！
						</view>
						<view class="good_type_info_price">
							¥17
						</view>
					</view>
				</view>
				<view class="good_type_num_item">
					<view class="good_type_label">
						数量
					</view>
					<view class="good_types_nums">
						<view class="good_con_item_dec">
							<image src="../../static/image/shop/dec.svg" mode=""></image>
						</view>
						<view class="good_con_item_num">
							1
						</view>
						<view class="good_con_item_add">
							<image src="../../static/image/shop/add.svg" mode=""></image>
						</view>
					</view>
				</view>

				<view class="good_type_item" v-for="(item,index) in goodTypeList" :key="index">
					<view class="good_type_label">
						{{item.label}}
					</view>
					<view class="good_type_list">
						<view class="good_type_item" v-for="(item2,index2) in item.list"
							:class="item2.active == true?'active':''">
							{{item2.name}}
						</view>
					</view>
				</view>

				<view class="good_type_close" @tap="closeGoodType()">
					<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
				</view>
			</view>
		</transition>
		<transition appear name="type">
			<view class="good_cartList" v-show="cartFlag == true">
				<view class="cartList_hd">
					<view class="cartList_clear">
						<image src="../../static/image/shop/delete.svg" mode=""></image>
						清空购物车
					</view>
					<view class="cartList_hd_title">
						已选商品
					</view>
					<view class="good_type_close" @tap="closeCart()">
						<uni-icons type="closeempty" size="20" color="#666"></uni-icons>
					</view>
				</view>
				<view class="carList_bd">
					<view class="cartList_item" v-for="(item,index) in cartList" :key="index">
						<view class="cartList_item_img">
							<image :src="item.picUrl" mode="aspectFill"></image>
						</view>
						<view class="cartList_item_info">
							<view class="cartList_item_title">
								{{item.name}}
							</view>
							<view class="cartList_item_tags">
								{{item.tag}}
							</view>
							<view class="carList_item_price">
								¥{{item.price}}
							</view>

							<view class="good_types_nums">
								<view class="good_con_item_dec">
									<image src="../../static/image/shop/dec.svg" mode=""></image>
								</view>
								<view class="good_con_item_num">
									1
								</view>
								<view class="good_con_item_add">
									<image src="../../static/image/shop/add.svg" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</transition>

		<view class="mask" v-if="maskFlag == true">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,

				goodType: 1,
				goodTab: [{
						name: '点餐',
						type: 1
					},
					{
						name: '评价',
						type: 2
					},
					{
						name: '商家',
						type: 3
					}
				],

				star: 5,

				typeId: 1,
				typeName: '麻辣水煮',
				typeList: [{
						name: '麻辣水煮',
						id: 1,
						num: 1
					},
					{
						name: '清蒸鲈鱼',
						id: 2,
						num: 0
					},
					{
						name: '酸菜鱼',
						id: 3,
						num: 0
					},
					{
						name: '西湖醋鱼',
						id: 4,
						num: 0
					},
					{
						name: '糖醋鱼',
						id: 5,
						num: 0
					},
					{
						name: '草鱼',
						id: 6,
						num: 0
					},
				],
				goodsList: [{
						picUrl: require('../../static/image/shop/good_01.jpg'),
						name: '烤鱼美食麻辣鱼',
						price: 0.1,
						type: null,
						num: 0
					},
					{
						picUrl: require('../../static/image/shop/good_02.jpg'),
						name: '藤椒财鱼营养麻辣鱼',
						price: 1,
						type: null,
						num: 0
					},
					{
						picUrl: require('../../static/image/shop/good_03.jpg'),
						name: '湘菜麻辣整鱼',
						price: 12,
						type: {},
						num: 0
					},
					{
						picUrl: require('../../static/image/shop/good_04.jpg'),
						name: '湖南长沙麻辣鱼面',
						price: '17',
						type: null,
						num: 0
					},
				],

				evaluateType: '',
				evaluateTypes: [{
						name: '全部',
						active: true,
						type: '',
						number: null
					},
					{
						name: '好评',
						active: false,
						type: 1,
						number: 23
					},
					{
						name: '中评',
						active: false,
						type: 2,
						number: 0
					},
					{
						name: '差评',
						active: false,
						type: 3,
						number: 1
					},
				],

				commentList: [{
						name: '主体昵称',
						star: 5,
						attr: require('../../static/image/shop/user_01.png'),
						content: '酸菜鱼面真的很好吃，大家可以点这份进行品尝。',
						imgList: [require('../../static/image/shop/comment_01.jpg'), require(
							'../../static/image/shop/comment_02.jpg'), require(
							'../../static/image/shop/comment_03.jpg')],
						replay: '感谢贵人的鼎力支持好评，您的一份好评就是对我们最大的帮助。',
						time: '2021.07.08'
					},
					{
						name: '主体昵称',
						star: 3,
						attr: require('../../static/image/shop/user_02.png'),
						content: '我觉得这家店还行，就是服务可能有点没到位吧。',
						imgList: [],
						replay: '感谢小哥的评价，我们会后续改进，您下次来的时候一定会体验到我们的更高级的服务，谢谢您的评价。',
						time: '2021.07.08'
					},
				],

				carList: {
					total: 0,
					price: 0,
					list: []
				},

				goodTypeList: [{
						label: '辣度',
						list: [{
								name: '香辣',
								active: true
							},
							{
								name: '微辣',
								active: false
							},
							{
								name: '麻辣',
								active: false
							},
							{
								name: '特辣',
								active: false
							},
						]
					},
					{
						label: '分量',
						list: [{
								name: '大份',
								active: true
							},
							{
								name: '中份',
								active: false
							},
							{
								name: '小份',
								active: false
							},
						]
					},
				],
				cartList: [{
						picUrl: require('../../static/image/shop/good_01.jpg'),
						name: '意大利特火小面条200g来点',
						tag: '大份/微辣',
						price: '17',
						num: 1
					},
					{
						picUrl: require('../../static/image/shop/good_01.jpg'),
						name: '意大利特火小面条200g来点',
						tag: '大份/微辣',
						price: '17',
						num: 1
					},
				],

				typeFlag: false,
				cartFlag: false,
				maskFlag: false
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeTab(item) {
				this.goodType = item.type;
			},
			decGood(item) {
				if (item.num > 0) {
					item.num--;
					this.carList.total--;
					this.carList.price -= parseFloat(item.price);
				}
			},
			addGood(item) {
				item.num++;
				this.carList.total++;
				this.carList.price += parseFloat(item.price);
			},

			selectType() {
				this.typeFlag = true;
				this.maskFlag = true;
			},
			closeGoodType() {
				this.typeFlag = false;
				this.maskFlag = false;
			},
			openShopCar() {
				this.cartFlag = true;
				this.maskFlag = true;
			},
			closeCart() {
				this.cartFlag = false;
				this.maskFlag = false;
			},
			tocheckout(){
				uni.navigateTo({
					url:'/pages/shop/checkout'
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep uni-swiper .uni-swiper-dot {
		background-color: rgba(255, 255, 255, .5);
		width: 48rpx;
		height: 6rpx;
		border-radius: 0;
	}

	::v-deep uni-swiper .uni-swiper-dot-active {
		background-color: #2588FF;
	}

	.type-enter-active {
		animation: inventory .2s linear;
	}

	.type-leave-active {
		animation: inventory .2s linear reverse;
	}

	@keyframes inventory {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.navigation_bg {
		height: 360rpx;
		background: url('../../static/image/shop/detailBg.png') no-repeat;
	}

	.navigation {
		width: 100%;
		height: 160rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: absolute;
		z-index: 2;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #fff;
			font-size: 36rpx;
		}
	}

	.good_con {
		padding: 0 24rpx;

		.good_info {
			padding: 26rpx 28rpx;
			border-radius: 12rpx;
			background-color: #fff;
			margin-top: -140rpx;
			box-shadow: 0px 4px 8px rgba(37, 136, 255, 0.06);

			.good_info_hd {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.good_info_msg {
					width: 75%;

					.good_info_title {
						font-size: 36rpx;
						font-weight: 700;
						color: #2E343A;
					}

					.good_info_brief {
						color: #9098A0;
						font-size: 24rpx;
					}
				}

				.good_info_img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
			}

			.good_info_notice {
				image {
					width: 28rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #9098A0;
				}
			}
		}

		.good_tabs {
			display: flex;
			margin-top: 56rpx;

			.good_tab {
				margin-right: 80rpx;
				position: relative;
				font-size: 32rpx;
				color: #2E343A;
				font-weight: 500;

				&.active {
					.good_tab_line {
						display: block;
					}
				}

				.good_tab_line {
					display: none;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 6rpx;
					background-color: #2588FF;
				}
			}
		}

		.good_con_detail {
			margin-top: 20rpx;
			padding-bottom: 200rpx;
			display: flex;

			.good_con_aside {
				width: 20%;

				.good_aside_tab {
					color: #9098A0;
					font-size: 28rpx;
					padding: 20rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&.active {
						color: #333;
						font-weight: 700;
					}

					.good_aside_tab_num {
						position: absolute;
						top: -15rpx;
						right: 8rpx;
						border: 2rpx solid #fff;
						background-color: #FFB226;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
					}
				}
			}

			.good_con_list {
				width: 80%;
				padding-top: 20rpx;
				padding-left: 20rpx;

				.good_con_list_title {
					color: #969696;
					font-weight: bolder;
				}

				.good_con_item {
					position: relative;
					display: flex;
					margin-top: 20rpx;

					.good_con_item_img {
						flex-shrink: 0;

						image {
							width: 162rpx;
							height: 162rpx;
							border-radius: 12rpx;
						}
					}

					.good_con_item_info {
						margin-left: 32rpx;

						.good_con_item_title {
							color: #2E343A;
							font-size: 28rpx;
							font-weight: 700;
						}

						.good_con_item_price {
							color: #FF2626;
							font-size: 32rpx;
							margin-top: 60rpx;
						}
					}

					.good_con_item_type {
						position: absolute;
						bottom: 10rpx;
						right: 0;
						width: 86rpx;
						height: 40rpx;
						background-color: #2588FF;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						color: #FFFFFF;
						border-radius: 40rpx;

						.good_con_item_type_num {
							position: absolute;
							top: -35rpx;
							right: 8rpx;
							border: 2rpx solid #fff;
							background-color: #FFB226;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.good_con_item_nums {
						position: absolute;
						bottom: 0;
						right: 0;
						display: flex;
						align-items: center;

						.good_con_item_dec {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.good_con_item_num {
							margin: 0 16rpx;
							font-size: 28rpx;
							color: #2E343A;
							margin-top: -10rpx;
						}

						.good_con_item_add {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}

			.good_con_merchant {
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 5;
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				padding: 0 24rpx;
				display: flex;
				align-items: center;

				.good_con_mer_checkout {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					border-radius: 100rpx;
					background-color: #3A3635;
					padding-left: 140rpx;
					padding-right: 60rpx;

					.good_merchant_distribute {
						font-size: 28rpx;

						.merchant_price {
							color: #fff;
						}

						text {
							color: #999999;
						}
					}

					.good_merchant_min {
						color: #999999;
						font-size: 28rpx;
					}

					.good_con_shop_car {
						position: absolute;
						left: 0;
						top: -18rpx;

						image {
							width: 90rpx;
							height: 120rpx;
						}

						.good_con_shopcar_num {
							position: absolute;
							top: 0;
							right: -18rpx;
							border: 2rpx solid #fff;
							background-color: #2288FF;
							color: #fff;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}

					}
				}

				.good_merchant_checkout {
					position: absolute;
					right: 0;
					width: 192rpx;
					height: 100rpx;
					background-color: #2588FF;
					border-top-right-radius: 200rpx;
					border-bottom-right-radius: 200rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.good_con_evaluate {
			margin-top: 20rpx;
			padding-bottom: 200rpx;

			.good_con_score {
				display: flex;
				align-items: center;

				.score_num {
					font-size: 80rpx;
					color: #2588FF;
					font-weight: bolder;
				}

				.score_right {
					margin-left: 20rpx;

					.score_stars {
						display: flex;

						image {
							width: 16rpx;
							height: 16rpx;
							margin-right: 8rpx;
						}
					}

					.score_type_num {
						color: #9098A0;
						font-size: 24rpx;
					}
				}
			}

			.evaluate_types {
				display: flex;
				align-items: center;
				margin-top: 15rpx;

				.evaluate_type {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #2E343A;
					font-weight: 500;
					margin-right: 30rpx;
					width: 130rpx;
					height: 56rpx;
					border-radius: 56rpx;

					&.active {
						background-color: #2588FF;
						color: #fff;
					}
				}
			}

			.evaluate_comments {
				margin-top: 30rpx;

				.evaluate_comment {
					margin-bottom: 20rpx;

					.comment_hd {
						position: relative;
						display: flex;
						align-items: center;

						.comment_attr {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
						}

						.comment_info {
							margin-left: 16rpx;

							.comment_name {
								font-size: 28rpx;
								color: #2E343A;
								font-weight: 500;
							}

							.comment_stars {
								display: flex;
								margin-top: 10rpx;

								image {
									width: 16rpx;
									height: 16rpx;
									margin-right: 8rpx;
								}
							}
						}

						.comment_time {
							position: absolute;
							right: 0;
							font-size: 24rpx;
							color: #9098A0;
						}
					}

					.comment_bd {
						.comment_content {
							font-size: 30rpx;
							color: #2E343A;
							text-align: justify;
						}

						.comment_imgs {
							display: flex;
							margin-top: 24rpx;

							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 12rpx;
								margin-right: 16rpx;
							}
						}
					}

					.comment_bt {
						margin-top: 24rpx;
						padding: 16rpx;
						font-size: 26rpx;
						color: #2E343A;
						background-color: #F9FBFC;
					}
				}
			}
		}

		.good_shop_info {
			margin-top: 20rpx;

			.good_shop_info_title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 700;
			}

			.good_shop_swiper {
				margin-top: 24rpx;
				width: 100%;
				height: 260rpx;

				.swiper {
					height: 260rpx;
				}

				.swiper-item {
					width: 100%;
					height: 260rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.good_shop_info_list {
				margin-top: 24rpx;
				background-color: #F9FBFC;
				padding: 24rpx;
				border-radius: 12rpx;

				.good_shop_info_item {
					position: relative;
					display: flex;
					margin-bottom: 24rpx;

					.good_shop_info_icon {
						margin-right: 18rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 28rpx;
						color: #2E343A;
					}

					.call_phone {
						position: absolute;
						right: 24rpx;
						font-size: 24rpx;
						color: #2288FF;
						font-weight: 500;
					}
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.good_type {
		position: fixed;
		bottom: 200rpx;
		left: 0;
		width: 100%;
		z-index: 5;
		background-color: #fff;
		padding: 28rpx 24rpx;
		border-radius: 16rpx 16rpx 0 0;

		.good_type_close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}

		.good_type_select {
			font-size: 24rpx;
			color: #2E343A;
		}

		.good_type_info {
			display: flex;
			margin-top: 30rpx;

			.good_type_info_img {
				image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 12rpx;
				}
			}

			.good_type_info_msg {
				margin-left: 32rpx;

				.good_type_info_name {
					color: #2E343A;
					font-size: 32rpx;
					font-weight: 700;
				}

				.good_type_info_price {
					font-size: 32rpx;
					color: #FF2626;
					font-weight: 700;
					margin-top: 60rpx;
				}
			}
		}

		.good_type_num_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.good_type_label {
				font-size: 24rpx;
				color: #2E343A;
			}

			.good_types_nums {
				display: flex;
				align-items: center;

				.good_con_item_dec {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.good_con_item_num {
					margin: 0 16rpx;
					font-size: 28rpx;
					color: #2E343A;
					margin-top: -10rpx;
				}

				.good_con_item_add {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.good_type_item {
			margin-top: 20rpx;

			.good_type_label {
				font-size: 28rpx;
				color: #2E343A;
			}

			.good_type_list {
				margin-top: 12rpx;
				display: flex;
				flex-wrap: wrap;

				.good_type_item {
					margin-right: 16rpx;
					width: 152rpx;
					height: 56rpx;
					border-radius: 56rpx;
					background-color: #F9FBFD;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #2E343A;

					&.active {
						background-color: #2588FF;
						color: #fff;
					}
				}
			}
		}
	}

	.good_cartList {
		position: fixed;
		bottom: 200rpx;
		left: 0;
		width: 100%;
		z-index: 5;
		background-color: #fff;
		padding: 28rpx 24rpx;
		border-radius: 16rpx 16rpx 0 0;

		.cartList_hd {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cartList_hd_title {
				font-size: 24rpx;
				color: #2E343A;
			}

			.cartList_clear {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #2E343A;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 4rpx;
				}
			}

		}

		.carList_bd {
			.cartList_item {
				position: relative;
				margin-top: 20rpx;
				display: flex;

				.cartList_item_img {
					image {
						width: 162rpx;
						height: 162rpx;
						border-radius: 12rpx;
					}
				}

				.cartList_item_info {
					margin-left: 24rpx;

					.cartList_item_title {
						font-size: 28rpx;
						color: #2E343A;
						font-weight: 700;
					}

					.cartList_item_tags {
						font-size: 24rpx;
						color: #9098A0;
						margin-top: 10rpx;
					}

					.carList_item_price {
						font-size: 32rpx;
						color: #FF2626;
						margin-top: 30rpx;
					}
				}

				.good_types_nums {
					position: absolute;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;

					.good_con_item_dec {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.good_con_item_num {
						margin: 0 16rpx;
						font-size: 28rpx;
						color: #2E343A;
						margin-top: -10rpx;
					}

					.good_con_item_add {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>